<template>
  <div style="padding: 32px 0; background: #fafafa; min-height: 100vh; max-width: 1300px; margin: 0 auto;">
    <!-- 优惠券信息 -->
    <el-card style="margin-bottom: 24px;">
      <div style="font-weight: bold; font-size: 18px; margin-bottom: 18px;">优惠券信息</div>
      <el-row :gutter="24" style="margin-bottom: 8px;">
        <el-col :span="6">优惠券名称：全品类优惠券</el-col>
        <el-col :span="6">优惠券类型：全场赠券</el-col>
        <el-col :span="6">可使用商品：全部商品</el-col>
        <el-col :span="6">使用门槛：满101元可用</el-col>
      </el-row>
      <el-row :gutter="24" style="margin-bottom: 8px;">
        <el-col :span="6">状态：未过期</el-col>
        <el-col :span="6">有效期：2017-07-31至2017-08-19</el-col>
        <el-col :span="6">总发放量：10000</el-col>
        <el-col :span="6">面值：100元</el-col>
      </el-row>
      <el-row :gutter="24" style="margin-bottom: 8px;">
        <el-col :span="6">已领取：10000</el-col>
        <el-col :span="6">待领取：10000</el-col>
        <el-col :span="6">已使用：10000</el-col>
        <el-col :span="6">未使用：10000</el-col>
      </el-row>
      <el-row :gutter="24" style="margin-bottom: 8px;">
        <el-col :span="24">备注：-</el-col>
      </el-row>
    </el-card>

    <!-- 查询区 -->
    <el-card style="margin-bottom: 24px;">
      <div style="font-weight: bold; font-size: 16px; margin-bottom: 12px;">查询</div>
      <el-form :inline="true" :model="filter" class="filter-form" style="margin-bottom: 0;">
        <el-form-item label="订单编号">
          <el-input v-model="filter.orderNo" placeholder="请输入内容" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item label="使用状态">
          <el-select v-model="filter.status" placeholder="全部" style="width: 140px;">
            <el-option label="全部" value="" />
            <el-option label="未使用" value="未使用" />
            <el-option label="已过期" value="已过期" />
            <el-option label="已使用" value="已使用" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">检索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 领取列表 -->
    <el-card>
      <div style="font-weight: bold; font-size: 16px; margin-bottom: 12px;">领取列表</div>
      <el-table :data="tableData" border style="width: 100%; margin-bottom: 12px;">
        <el-table-column prop="code" label="优惠券码" min-width="120" />
        <el-table-column prop="user" label="领取会员" min-width="120" />
        <el-table-column prop="type" label="领取方式" min-width="120" />
        <el-table-column prop="status" label="当前状态" min-width="120" />
        <el-table-column prop="time" label="使用时间" min-width="180" />
        <el-table-column prop="orderNo" label="订单编号" min-width="180" />
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next, jumper, ->, total, sizes"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
        :page-sizes="[10, 20, 50, 100]"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const filter = ref({ orderNo: '', status: '' });
const tableData = ref([
  { code: '12333333', user: 'Axlab', type: '后台赠送', status: '未使用', time: '-', orderNo: '-' },
  { code: '12333333', user: 'Axlab', type: '主动领取', status: '已过期', time: '2021-03-02 ~ 2017-03-12', orderNo: '232332222222' },
  { code: '12333333', user: 'Axlab', type: '主动领取', status: '已过期', time: '2021-03-02 ~ 2017-03-12', orderNo: '232332222222' },
  { code: '12333333', user: 'Axlab', type: '主动领取', status: '已过期', time: '2021-03-02 ~ 2017-03-12', orderNo: '232332222222' }
]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(4);
function handleSearch() {
  // mock 检索
}
function handleReset() {
  filter.value = { orderNo: '', status: '' };
}
function handlePageChange(val: number) {
  currentPage.value = val;
}
function handleSizeChange(val: number) {
  pageSize.value = val;
}
</script>

<style scoped>
.filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
</style> 